<template>
  <div class="add-emp">
    <el-dialog title="新增员工" :visible="adddialogForm" @close="cancelClick">
      <el-form :model="addForm" :label-width="formLabelWidth" style="width:75%">
        <el-form-item label="姓名" placeholder="请输入姓名">
          <el-input v-model="addForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            style="width:100%"
            v-model="addForm.timeOfEntry"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="聘用形式">
          <el-select
            style="width:100%"
            v-model="addForm.formOfEmployment"
            placeholder="请选择聘用形式"
          >
            <el-option
              v-for="item in hireType"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="addForm.workNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input
            @focus="getdepartments"
            @blur="onBlur"
            v-model="addForm.departmentName"
            autocomplete="off"
          ></el-input>
          <el-tree
            v-if="showTree"
            :data="Treedata"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-form-item>
        <el-form-item label="转正时间">
          <el-date-picker
            style="width:100%"
            v-model="addForm.correctionTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelClick">取 消</el-button>
        <el-button type="primary" @click="primaryClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入获取部门
import { getDepartment } from '@/api/departments'
// 导入处理函数
import { toTree } from '@/utils'
// 导入枚举数据
import hireType from '@/api/constant/employees'
// 导入方法
import { addEmp } from '@/api/employees'
export default {
  name: 'add-emp',
  data () {
    return {
      Treedata: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      showTree: false,
      addForm: { departmentName: '' },
      formLabelWidth: '120px',

      hireType: hireType.hireType
    }
    // 表单校验规则
  },
  props: {
    adddialogForm: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    //   点击子节点
    handleNodeClick (data) {
      // 把点击的值给表单绑定的数据
      this.addForm.departmentName = data.name
      this.showTree = false
    },
    // 部门框失去焦点事件
    onBlur (e) {
      // 判断焦点去到了哪里，如果是tree中就不要隐藏
      if (e.relatedTarget.className.indexOf('el-tree-node') == -1) {
        this.showTree = false
      }
    },
    async getdepartments () {
      let res = await getDepartment()
      let arr = await toTree(res.data.depts, '')
      this.Treedata = arr
      //   显示树状结构
      this.showTree = true
    },
    // 确定按钮
    async primaryClick () {
      let res = await addEmp(this.addForm)
      //关闭弹窗
      this.$emit('update:adddialogForm', false)
      // 重新加载数据 可以传参数，条到最后一条，可以让用户直接看到最新添加的数据
      // console.log(res)
      // 提示新增成功
      this.$message.success('成功新增员工')
      // 修改父组件里的值,请求最后一页的数据
      let page = this.$parent.page
      page.total += 1
      let lastPage = Math.ceil(page.total / page.size)
      this.$parent.page.page = lastPage
      this.$parent.getEmpList(page)
    },
    cancelClick () {
      this.$emit('update:adddialogForm', false)
    }
  }
}
</script>

<style></style>
